<template>
  <a-modal title="任务领取" :width="660" :visible="visible" @ok="handleModalConfirm"
    @cancel="handleModalCancel" :confirm-loading="modalLoading" @after-open="saveFocusedElement" @after-close="restoreFocusedElement">
    <a-form-model ref="form" :model="form" :rules="formRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-model-item label="领取销售额" prop="channelName">
        <a-input style="width: 200px" v-model="form.channelName" placeholder="请输入" allowClear suffix="万" type="number" @change="handleChange" />
        
      </a-form-model-item>
    </a-form-model>
    <div class="tips_box" v-show="tipShow">
      <div class="text">*预计完成任务，结算订单需达到 <span>{{ testInfo.order_count }}</span> 单</div>
      <div class="sale">
        <div><span>*</span> 预计任务补贴：</div>
        <a-input style="width: 200px" v-model="testInfo.commission"  allowClear suffix="元" type="number" disabled />
      </div>
      <div class="sale">
        <div><span>*</span> 任务补贴：</div>
        <a-input style="width: 200px" v-model="testInfo.commission2" allowClear suffix="元" type="number" disabled />
      </div>
      <div class="Tips"> 提示:当前您的任务补贴比例{{level_task_commission_rate}}%</div>
    </div>
    
  </a-modal>
</template>

<script>
import * as Ajax from '@/api/channel';

export default {
  props: {
    task_uuid: {
      type: String,
      default: '',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    level_task_commission_rate: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      modalLoading: false,
      form: {
        typeOptions: '',
        secretKey: '',
        channelCode: '',
        channelName: '',
        loanAssistanceStatus: false,
        price: '',
        shareProfit: undefined,
        type: undefined,
        remark: '',
        
      },
      formRules: {
        channelName: { required: true, message: '请输入销售额', trigger: ['blur', 'change'] },
        companyName: { required: true, message: '请输入公司名称', trigger: ['blur', 'change'] },
        price: { required: true, message: '请输入价格', trigger: ['blur', 'change'] },
        shareProfit: { required: true, message: '请选择分润模式', trigger: ['blur', 'change'] },
        type: { required: true, message: '请选择渠道类型', trigger: ['blur', 'change'] },
      },
      typeOptions: [
        { label: '同业', value: 0 },
        { label: '信息流', value: 1 },
      ],
      shareOptions: [
        { label: '单价', value: 0 },
        { label: '分润', value: 1 },
      ],
      focusedElement: null,
      testInfo:{
        order_count:'',
        commission:'',
        commission2:'',
      },
      tipShow:false
    };
  },
  methods: {
    handleModalConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // this.modalLoading = true;
          console.log('确定提交');
          
          Ajax.receiveTask({sale_money:this.form.channelName,task_uuid:this.task_uuid,anchor_no_json:'[]'})
            .then(( res ) => {
              console.log('res.error',res);
              
              if (res.error === 0) {
                console.log('res.error',res);
                
                this.$message.success('领取成功');
                this.$emit('success');
                this.handleModalCancel();
                this.tipShow = false;
              }
            })
            .finally(() => {
              this.modalLoading = false;
            });
        }
      });
    },
    get_receiveEstimate() {
      Ajax.receiveEstimate({sale_money:this.form.channelName,task_uuid:this.task_uuid}).then((res) => {
        console.log('res.error',res.error);
        
        if (res.error === 0) {
         
         this.testInfo.commission = res.data.commission;
         this.testInfo.commission2 = ( res.data.commission - 0 ) /  (this.level_task_commission_rate- 0 * 0.01);
         this.testInfo.order_count = res.data.order_count;
         this.tipShow = true;
        }
      })
    },
    handleModalCancel() {
      this.form = this.$options.data().form;
      this.$refs.form.resetFields();
      this.$emit('close');
    },
    saveFocusedElement() {
      this.focusedElement = document.activeElement;
    },
    restoreFocusedElement() {
      if (this.focusedElement) {
        this.focusedElement.focus();
      }
    },
    handleChange() {
      this.get_receiveEstimate()
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  padding-top: 16px;
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;
}

::v-deep .ant-form-item {
  &:last-child {
    margin-bottom: 0;
  }
}
.tips_box {
  padding: 4px;
}
.text{
  // font-size: 16px;
  color: #999999;
  margin: 10px 0;
  // text-align: center;
  span {
    color: #E33B35;
  }
}
.sale {
  display: flex;
  align-items: center;
  margin-left: 4px;
  margin-bottom: 10px;
  div {
    font-size: 14px;
    span {
      color: #E33B35;
    }
  }
}
</style>